<template>
	<view class="all">
		<!-- 基金名称  -->
		<view class="deal">
			<view>
				<view class="message">
					<text>基金名称</text>
					<text>{{name}}</text>
				</view>
				<view class="message">
					<text>交易账户</text>
					<text>1659888*****4855</text>
				</view>
			</view>
			<view class="money">可用金额10.00元</view>
		</view>
		<!-- 购买金额 -->
		<view class="acco3">
			<view class="acco3-1">
				<view>
					购买金额
				</view>
				<view>
					转账说明
				</view>
			</view>
			<view class="acco3-2">
				<text>￥</text>
				<u-input v-model="value3" :type="type" :border="border" placeholder="起购10.00元" />
			</view>
			<view class=" acco3-3">
				手续费：1.20%
			</view>
		</view>
		<!-- 售后服务 -->
		<view class="afterSale">
			<u-field v-model="mobile1" label="售后服务" placeholder="(选填)" input-align="right">
			</u-field>
		</view>
		<!-- 同意书 -->
		<view class="book">
			<u-checkbox v-model="isChecked" shape="circle" active-color="#00d5c7">
				<text>
					我已阅读同意
					<text class="bookBlue">
						《风险提示书》《投资者风险不匹配告知书》《投资者确认函》《公开募集证卷投资基金客户维护费揭示》
					</text>
					<text>我已阅读并同意<text class="bookBlue">《基金产品信息概要》</text>，未经主动推荐，本人是自主办理该项业务的。</text>
				</text>
			</u-checkbox>
			<u-checkbox v-model="isChecked1" shape="circle" active-color="#00d5c7">
				<text>我已阅读并同意<text class="bookBlue">《基金产品信息概要》</text>，未经主动推荐，本人是自主办理该项业务的。</text>
				</text>
			</u-checkbox>
			<view class="bookBottom">
				本人已确认账户及交易为本人控制使用，且为交易的实际受益人。本人具有良好的诚信记录，同时保证资金来源的合法性和所提供资料的真实性、有效性、准确性、完整性，并对其承担责任。
			</view>
		</view>
		<!-- 提交按钮 -->
		<button class="purchase" @click="buy">购买</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mobile: '',
				code: '',
				// 购买金额
				value3: "",
				type: "number",
				border: false,
				// 售后服务
				mobile1: '',
				// 同意书
				isChecked: false, // 默认未选中
				isChecked1: false,
				name: this.$route.query.name
			}
		},
		methods: {
			buy() {
				uni.navigateTo({
					url: "/pages/transaction/transaction?money=" + this.value3 + '&name=' + this.name
				})
			}
		}
	}
</script>

<style scoped>
	.all {
		background-color: #eaeaea;
		height: 1550rpx;
		width: 100%;
		padding-top: 10rpx;
	}

	.message {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0rpx 20rpx;
		border-bottom: 1rpx solid #f5f5f5;
		height: 80rpx;
	}

	.deal {
		width: 100%;
		height: 240rpx;
		background-color: white;
		margin-top: 10rpx;
		position: relative;
	}

	.money {
		color: #5b5b5b;
		margin-top: 20rpx;
		position: absolute;
		right: 40rpx;
	}

	/* 购买金额 */
	.acco3 {
		height: 330rpx;
		background-color: white;
		margin-top: 20rpx;
	}

	.acco3-1 {
		display: flex;
		justify-content: space-between;
		padding: 20rpx 0rpx;
		border-bottom: 1rpx solid rgba(128, 128, 128, 0.2);
		margin-left: 10rpx;
	}

	.acco3-1 view:nth-child(1) {
		font-size: 40rpx;
		/* font-weight: 600; */
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	.acco3-1 view:nth-child(2) {
		font-size: 30rpx;
		color: rgb(0, 186, 158);
		margin-top: 20rpx;
		margin-right: 30rpx;
	}

	.acco3-2 {
		height: 150rpx;
		border-bottom: 1rpx solid rgba(128, 128, 128, 0.2);
		display: flex;
		align-items: center;
		font-size: 80rpx;
		margin-left: 10rpx;
	}

	.acco3-3 {
		font-size: 30rpx;
		color: rgb(128, 128, 128);
		margin-top: 20rpx;
		margin-left: 20rpx;
	}

	/* 售后服务 */
	.afterSale {
		height: 80rpx;
		background-color: white;
		margin-top: 20rpx;
	}

	/* 同意书 */
	.book {
		width: 95%;
		margin: 0 auto;

	}

	.bookBlue {
		color: #00d5c7;
	}

	.bookBottom {
		width: 90%;
		margin: 10rpx auto;
		line-height: 45rpx;
	}

	/* 购买按钮 */
	.purchase {
		width: 90%;
		height: 80rpx;
		margin-top: 40rpx;
		background-color: #ffa50066;
		color: white;
	}
</style>